<h3 class="mb-4">Summary</h3>
<controversy-summary [companyId]="companyId" [incidents]="incidents"></controversy-summary>

<!-- todo: refactor list below -->
<h3 class="mt-5 mb-4">Controversies by Theme</h3>
<div *ngIf="incidents && companyId" class="row">
    <div class="col-md-4">
        <h5 class="theme-name">Environment</h5>

        <a *ngFor="let incident of incidents | incidentsByTheme: 'Environment'" class="card shadow mb-4 text-none" [routerLink]="['/ga', 'research', 'company', companyId,'controversies', 'incidents', incident.number]">
            <div class="card-body p-3">
                <div class="incident-name">{{ incident.name }}</div>

                <div class="d-flex align-items-center incident-description">
                    <img *ngIf="incident.answerCategory > 0" [attr.src]="'/assets/icons-svg/icon-cat'+incident.answerCategory+'.svg'" class="controversy-icon float-left mr-2" />
                    <span *ngIf="incident.answerCategory == 0" style="line-height: 2rem;">No evidence of relevant controversies</span>
                    <span *ngIf="incident.answerCategory > 0">Category {{ incident.answerCategory }} - {{ incident.eventSeverity }}</span>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-4">
        <h5 class="theme-name">Social</h5>
        <a *ngFor="let incident of incidents | incidentsByTheme: 'Social'" class="card shadow mb-4 text-none" [routerLink]="['/ga', 'research', 'company', companyId,'controversies', 'incidents', incident.number]">
            <div class="card-body p-3">
                <div class="incident-name">{{ incident.name }}</div>

                <div class="d-flex align-items-center incident-description">
                    <img *ngIf="incident.answerCategory > 0" [attr.src]="'/assets/icons-svg/icon-cat'+incident.answerCategory+'.svg'" class="controversy-icon float-left mr-2" />
                    <span *ngIf="incident.answerCategory == 0" style="line-height: 2rem;">No evidence of relevant controversies</span>
                    <span *ngIf="incident.answerCategory > 0">Category {{ incident.answerCategory }} - {{ incident.eventSeverity }}</span>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-4">
        <h5 class="theme-name">Governance</h5>
        <a *ngFor="let incident of incidents | incidentsByTheme: 'Governance'" class="card shadow mb-4 text-none" [routerLink]="['/ga', 'research', 'company', companyId,'controversies', 'incidents', incident.number]">
            <div class="card-body p-3">
                <div class="incident-name">{{ incident.name }}</div>

                <div class="d-flex align-items-center incident-description">
                    <img *ngIf="incident.answerCategory > 0" [attr.src]="'/assets/icons-svg/icon-cat'+incident.answerCategory+'.svg'" class="controversy-icon float-left mr-2" />
                    <span *ngIf="incident.answerCategory == 0" style="line-height: 2rem;">No evidence of relevant controversies</span>
                    <span *ngIf="incident.answerCategory > 0">Category {{ incident.answerCategory }} - {{ incident.eventSeverity }}</span>
                </div>
            </div>
        </a>
    </div>
</div>